<!--vue模板-->
<template>
  <div>
    <!--货代询价搜索-->
    <div >
      <el-form>
        <el-row>
          <el-col :span="3.5">
            <el-form-item label="报价编码:">
              <el-input v-model="filters.quotation" placeholder="请输入" style="margin-right: 30px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="default" @click="initData" style="background-color: #2F4050; color: white">搜索</el-button>
            <el-button type="default" @click="reset" style="background-color: #2F4050; color: white">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--客户列表-->
    <el-table :data="tableData" style="width: 100%; margin-top: 30px;" stripe border>

      <el-table-column
        prop="quotation"
        label="报价编码"
        width="150"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="contactPerson"
        label="货代名称"
        width="100"
        header-align="center"
        align="center"
      />
      <el-table-column

        prop="create_time"
        label="报价时间"
        width="236"
        header-align="center"
        align="center"
      />
      <el-table-column

        prop="is_default"
        label="默认报价"
        width="150"
        header-align="center"
        align="center"
      >
        <template v-slot="{row}">
          <span v-if="row.is_default == 1" >默认</span>
          <span v-else-if="row.is_default == 2">非默认</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        width="200"
        header-align="center"
        align="center"
      >
        <template v-slot="{row}">
          <template v-if="row.status === 3">
            <span>更新出运</span>
          </template>
          <template v-else>
            <span v-if="row.type === 1">错误退单</span>
            <span v-else-if="row.type === 2">砍价退单</span>
            <span v-else-if="row.type === 0">--</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="reason"
        label="备注"
        width="200"
        header-align="center"
        align="center"
      />
      <el-table-column
        label="操作"
        header-align="center"
        align="center">
        <template v-slot="{ row }">
<!--          通用按钮怎么都显示-->
          <el-button
            link type="primary"
            style="font-weight: bold;"
            @click = "forwardMoney(row)"
          >报价详情</el-button>
          <el-button
            v-if="row.is_default == 2"
            link type="primary"
            style="font-weight: bold;"
            @click = "updateIsDefault(row.quotation)"
          >设置为默认</el-button>
          <el-button
            v-if="row.type == 0 && row.is_confirm == 2 && row.status != 3"
            link type="primary"
            style="font-weight: bold;"
            @click = "ErrorRefund(row.quotation)"
          >错误退单</el-button>
          <el-button
            v-if="row.type == 0 && row.is_confirm == 2 && row.status != 3"
            link type="primary"
            style="font-weight: bold;"
            @click = "BargainRefund(row.quotation)"
          >砍价退单</el-button>
          <el-button
            v-if="row.is_confirm == 2 && row.type == 0"
            link type="primary"
            style="font-weight: bold;"
            @click = "confirmOrder(row.quotation)"
          >确认订单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
    <!--弹窗-->
    <el-dialog
      title="错误退单"
      v-model="errorVisible"
      draggable
      width="30%"
      align-center
      class="dialog-custom"
    >
      <el-divider style="margin-top: 5px; border: 1px solid black;"/> <!-- 添加分割线 -->
      <el-form :model="errorForm" ref="errorForm2">
        <el-form-item label="原因:" >
          <el-input
            v-model="errorForm.reason"
            type="textarea"
            placeholder="多行输入"
            :rows="9"
            style="width: 400px; border: 1px solid black;"
          />
        </el-form-item>
      </el-form>
      <div class="dialog-footer" style="margin-top: 20px;">
        <el-button type="primary" @click="errorSubmit">确 定</el-button>
        <el-button @click="errorVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<!--vue 组件选项定义-->
<script setup>
import {ref, onMounted} from "vue";
//引入图标
import {Delete, Edit} from "@element-plus/icons-vue";
//引入路由
import {useRouter} from "vue-router";
import {queryForwarderQuote,
  updateDefault,
  updateIsConfirm,
  BargainRefundOrder,
  ErrorRefundOrder} from "@/api/forwarderQuote.js";
import {ElMessage, ElMessageBox} from "element-plus";
//表格数据
const tableData = ref([]);
//路由实例
const router = useRouter();
const errorVisible = ref(false); //错误退单弹窗

// 在 script setup 中定义 quotation 的 ref
const currentQuotation = ref(null);
//过滤条件
const filters = ref({
  quotation: "",
});

//重置
function reset() {
  filters.value = {
    quotation: "",
  };
  initData();
}
const errorForm2 = ref();
//表单对象
const errorForm = ref({
  reason: "",
});

/**
 * 错误退单弹窗
 */
async function ErrorRefund(quotation) {
  currentQuotation.value = quotation;
  errorVisible.value = true;
}

async function errorSubmit() {
  console.log("xxx>>>", currentQuotation.value, errorForm.value.reason)
  const res = await ErrorRefundOrder(currentQuotation.value, errorForm.value.reason);

  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: "错误退单成功",
    });
    errorVisible.value = false;
    initData();
  } else {
    ElMessage({
      type: "error",
      message: "错误退单失败，请稍后重试",
    });
  }
}



/**
 * 设置默认报价（给销售看的）
 * @param quotation
 */
const updateIsDefault = (quotation) => {
  ElMessageBox.confirm(
    "是否确认设置为默认报价？",
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
      customClass: 'my-message-box' // 添加自定义类名


    }
  )
    .then(async () => {
      try {
        console.log("quotation>>>", quotation)
        const res = await updateDefault(quotation);
        if (res.code === 200) {
          initData();
          ElMessage({
            type: "success",
            message: "设置成功默认报价成功",
          });
        } else {
          ElMessage({
            type: "error",
            message: "设置失败，请稍后重试",
          });
        }
      } catch (error) {
        ElMessage({
          type: "error",
          message: "设置失败，请稍后重试",
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "warning",
        message: "已取消，请重新设置",
      });
    });
}


/**
 * 确认订单生成订单，货代订单管理
 * @param quotation
 */
const confirmOrder = (quotation) => {
  ElMessageBox.confirm(
    "是否确认订单？",
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,

    }
  )
    .then(async () => {
      try {
        console.log("quotation>>>", quotation)
        const res = await updateIsConfirm(quotation);
        if (res.code === 200) {
          initData();
          ElMessage({
            type: "success",
            message: "确认订单成功",
          });
        } else {
          ElMessage({
            type: "error",
            message: "确认失败，请稍后重试",
          });
        }
      } catch (error) {
        ElMessage({
          type: "error",
          message: "确认失败，请稍后重试",
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "warning",
        message: "已取消，请重新设置",
      });
    });
}


/**
 * 设置砍价退单
 * @param quotation
 */
const BargainRefund = (quotation) => {
  ElMessageBox.confirm(
    "是否确认退单，退单类型为砍价？",
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
      customClass: 'my-message-box' // 添加自定义类名


    }
  )
    .then(async () => {
      try {
        console.log("quotation>>>", quotation)
        const res = await BargainRefundOrder(quotation);
        if (res.code === 200) {
          initData();
          ElMessage({
            type: "success",
            message: "设置砍价退单成功",
          });
        } else {
          ElMessage({
            type: "error",
            message: "设置砍价退单失败，请稍后重试",
          });
        }
      } catch (error) {
        ElMessage({
          type: "error",
          message: "设置砍价退单失败，请稍后重试",
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "warning",
        message: "已取消，请重新设置",
      });
    });
}






/**
 * 跳转到报价详情页
 */
function forwardMoney(row) {
  console.log("cccc",row)
  router.push({
    path: "/forwarder/quotation",
    query: {
      quotation: row.quotation,
      inquiry: row.inquiry,
    },
  });
}

//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数

//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
}


//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    quotation: filters.value.quotation,

  };
  let res = await queryForwarderQuote(data);
  console.log("res>>>", res)
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

//生命周期钩子
onMounted(() => {
  initData();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.dialog-custom .dialog-footer {
  display: flex;
  justify-content: flex-end; /* 将按钮移动到右下角 */
  padding: 10px 20px 20px; /* 调整内边距 */
}

.dialog-custom .dialog-footer .el-button {
  color: black;
}
</style>
